<template>
  <div class="home-search-view">
    <header>
      <form action="/">
        <van-search
          v-model="value"
          show-action
          shape="round"
          placeholder="那个女配的故事"
          :left-icon="icon"
          @search="getSearch"
          @input="getSearch"
          @cancel="back"
        />
      </form>
    </header>

    <nav>
      <van-swipe :autoplay="3000" indicator-color="#fff">
        <van-swipe-item v-for="(image, index) in advertisingData" :key="index">
          <img v-lazy="image.res_url[0]" />
        </van-swipe-item>
      </van-swipe>
    </nav>

    <main>
      <van-tabs v-model="active" line-height="0" :swipeable="false" animated v-show="!value">
        <van-tab v-for="(item,index) in rankList" :title="item.listName" :key="index">
          <keep-alive>
            <!-- hotLists -->
            <search-view :hotLists="item.hotLists" />
          </keep-alive>
        </van-tab>
      </van-tabs>

      <div class="search-results" v-show="value">
        <search-results-view :searchResults="searchResults" />
      </div>
    </main>
  </div>
</template>

<script>
import { Toast } from "vant";
import { get_search, get_home_search, get_advertising } from "@/apis/http";
import SearchView from "@/components/HomeComponents/SearchComponents/SearchView.vue";
import SearchResultsView from "@/components/HomeComponents/SearchComponents/SearchResultsView.vue";

export default {
  name: "HomeSearchView",
  components: { SearchView, SearchResultsView },
  data() {
    return {
      active: 0,
      value: "",
      icon: require("@/assets/images/home/search.png"),
      advertisingData: [],
      rankList: [],
      searchResults: []
    };
  },
  mounted() {
    this.getNewData();
    this.getAdvertising();
  },
  methods: {
    //第二步  在自定义方法中调用get_users方法，通过async和awit搭配直接获取到数据
    async getNewData() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_home_search();
      // console.log(res); // 这样就获取到了请求的所有数据！
      this.rankList = res.rankList;
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    async getAdvertising() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let data = await get_advertising({
        category: "HOTSEARCHBANNER"
      });
      //   console.log(data); // 这样就获取到了请求的所有数据！
      this.advertisingData = data[0].ads;
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    async getSearch() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_search({
        key: this.value
      });
      // console.log(data); // 这样就获取到了请求的所有数据！
      this.searchResults = res.items;
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },

    back() {
      this.$router.back(); //后退
    }
  },
  computed: {
    flag() {
      if (this.searchResults !== []) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.home-search-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 100;
  background-color: rgb(255, 255, 255);

  header {
    height: 44px;
    margin-bottom: 10px;
  }

  nav {
    img {
      width: 100%;
      height: 100%;
    }
  }

  ::v-deep .van-swipe {
    width: 95vw;
    min-height: 0px;
    max-height: 114px;
    margin: 0 auto;
    border-radius: 10px;
  }

  main {
    position: relative;
    ::v-deep .van-tab {
      span {
        font-size: 14px;
      }
    }

    ::v-deep .van-tab--active {
      span {
        font-size: 16px;
      }
    }

    .search-results { 
      width: 100vw;
      height: 100vh;
      background-color: #fff;
      position: absolute;
      top: -10px;
      left: 0;
      z-index: 999;
    }
  }
}
</style>